/**
 * WeChatVoiceImageAnimation - 基于PNG图片的微信语音播放动画组件
 *
 * 使用PNG图片序列实现微信风格的语音播放动画效果
 *
 * 特性：
 * - 使用原生图片资源
 * - 基于 useFrameAnimationController 实现
 * - 支持颜色 tint（仅iOS完全支持，Android部分支持）
 * - 使用 opacity 动画，支持原生驱动
 * - 循环播放
 * - 简洁的API接口
 *
 * 动画效果：
 * - 帧1: 显示 wave1（1个波纹）
 * - 帧2: 显示 wave2（2个波纹）
 * - 帧3: 显示 wave3（3个波纹）
 * - 循环
 *
 * 性能分析：
 * - ✅ 使用 opacity 动画，支持原生驱动（useNativeDriver: true）
 * - ✅ 图片资源在组件挂载时一次性加载，无重复加载开销
 * - ✅ 使用 Animated.Image，动画在原生层执行，不占用JS线程
 * - ✅ 帧切换通过 opacity 控制显示/隐藏，性能开销极小
 * - ⚠️ tintColor 在 Android 上可能不支持所有图片格式
 * - ⚠️ 同时渲染3张图片会占用一定内存（但图片很小，影响可忽略）
 * - 💡 总体性能优秀，适合生产环境使用
 *
 * @example
 * ```tsx
 * <WeChatVoiceImageAnimation
 *   playing={isPlaying}
 *   color="#07C160"
 * />
 * ```
 */

import React, { useMemo, useEffect } from 'react';
import { View, Animated, Easing, StyleSheet } from 'react-native';
import { useFrameAnimationController } from '../../hooks/useFrameAnimationController';

/**
 * 图片资源
 */
const WAVE_IMAGES = {
  wave1: require('../../res/icons/wave3_right_3x.png'),
  wave2: require('../../res/icons/wave1_right_3x.png'),
  wave3: require('../../res/icons/wave2_right_3x.png'),
};

/**
 * 组件属性
 */
export interface WeChatVoiceImageAnimationProps {
  /** 是否播放，默认 false */
  playing?: boolean;

  /** 颜色（用于 tintColor），默认 '#07C160' (微信绿) */
  color?: string;

  /** 每帧持续时间（毫秒），默认 300 */
  frameDuration?: number;

  /** 图片尺寸，默认 30 */
  size?: number;
}

/**
 * 基于PNG图片的微信语音播放动画组件
 */
export function WeChatVoiceImageAnimation({
  playing = false,
  color = '#07C160',
  frameDuration = 300,
  size = 30,
}: WeChatVoiceImageAnimationProps) {
  // 2. 定义帧数据（每张图片的透明度）
  // 帧0: 只显示 wave1 [1, 0, 0]
  // 帧1: 只显示 wave2 [0, 1, 0]
  // 帧2: 只显示 wave3 [0, 0, 1]
  const frameData = useMemo(
    () => ({
      wave1Opacity: [1, 0, 0],
      wave2Opacity: [0, 1, 0],
      wave3Opacity: [0, 0, 1],
    }),
    [],
  );

  const frameCount = Object.values(frameData)[0]?.length ?? 3;

  // 1. 使用 Hook
  const {
    animatedValue,
    registerAnimation,
    interpolations,
    play,
    stop,
    isPlaying,
  } = useFrameAnimationController({
    frameData,
    frameCount,
  });

  // 3. 创建并注册动画对象
  useEffect(() => {
    // 创建循环动画
    const animation = Animated.loop(
      Animated.timing(animatedValue, {
        toValue: frameCount - 1, // 3帧：0, 1, 2
        duration: frameDuration * frameCount,
        easing: Easing.linear,
        useNativeDriver: true, // ✅ opacity 支持原生驱动
      }),
    );

    registerAnimation(animation);
  }, [animatedValue, frameCount, frameDuration, registerAnimation]);

  // 4. 响应外部 playing prop
  useEffect(() => {
    if (playing && !isPlaying) {
      play();
    } else if (!playing && isPlaying) {
      stop();
    }
  }, [playing, isPlaying, play, stop]);

  // 获取图片原始尺寸（wave@3x.png 假设为 90x90，实际显示为 30x30）
  // 如果需要精确控制，可以使用 Image.getSize 获取
  const imageStyle = useMemo(
    () => ({
      width: size,
      height: size,
    }),
    [size],
  );

  return (
    <View style={[styles.container, imageStyle]}>
      {/* Wave 1 */}
      <Animated.Image
        source={WAVE_IMAGES.wave1}
        style={[
          styles.image,
          imageStyle,
          {
            opacity: interpolations.wave1Opacity,
            tintColor: color, // iOS 完全支持，Android 部分支持
          },
        ]}
        resizeMode="contain"
      />

      {/* Wave 2 */}
      <Animated.Image
        source={WAVE_IMAGES.wave2}
        style={[
          styles.image,
          imageStyle,
          {
            opacity: interpolations.wave2Opacity,
            tintColor: color,
          },
        ]}
        resizeMode="contain"
      />

      {/* Wave 3 */}
      <Animated.Image
        source={WAVE_IMAGES.wave3}
        style={[
          styles.image,
          imageStyle,
          {
            opacity: interpolations.wave3Opacity,
            tintColor: color,
          },
        ]}
        resizeMode="contain"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    position: 'absolute',
  },
});
